<template>
  <div class="content-right" v-loading="loading">
    <section class="app-container">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>{{companyName}} </el-breadcrumb-item>
        <el-breadcrumb-item>{{irState.selectDept.dept_name}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索工具栏 -->
      <section class="content-search">
        <so-tool-bar :toolData="toolData" :query="irState.listQuery" @search="search"/>
      </section>
      <el-row>
        <el-col :span="10">
          <p class="statistics-text">
            总积分:<span>{{irState.scores}}</span>分
          </p>
        </el-col>
        <el-col :span="14">
          <el-upload 
            style="float: right;" 
            action="/api/behaviorRecord/export"
            name="export_file" 
            :before-upload="beforeUpload" 
            :on-success='handleHaveSuccess'
            :show-file-list="false"
            >
            <el-button type="primary" size="small">积分导入</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </section>
    <!-- 表格数据 -->
    <div class="">
      <el-table :data="irState.tableList" v-loading="irState.loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
        <el-table-column align="center" prop="id" label="流水号">
        </el-table-column>
        <el-table-column align="center" prop="integraltype_name" label="积分类型">
        </el-table-column>
        <el-table-column align="center" prop="score" label="积分">
        </el-table-column>
        <el-table-column align="center" label="姓名">
          <template template slot-scope="scope">
            <el-tooltip effect="dark" content="点击查看个人积分详情" placement="top">
              <el-button type="text" size="mini" @click="userInfo(scope.row.user_id)">{{scope.row.user_name}}</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="dept_name" label="部门">
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="发生时间">
        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注">
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <section class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="irState.listQuery.current" :page-sizes="[10,20,30,50]" :page-size="irState.listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="irState.listQuery.total">
      </el-pagination>
    </section>
    <!-- 占位 -->
    <br>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SoToolBar from "@/components/SoToolBar";
import count from "./count";

export default {
  name: "count_list",
  components: { SoToolBar },
  computed: {
    ...mapGetters(["companyName", "irState"])
  },
  data() {
    return {
      loading: false,
      toolData: [] //工具栏初始化
    };
  },
  methods: {
    beforeUpload(file){//导入
      this.loading = true;
      let name = file.name.split('.');
      if (name[name.length - 1] === 'xls' || name[name.length - 1] === 'xlsx') {
        return file
      } else {
        this.$message.error('文件只能是 xls/xlsx 格式!')
        return false
      }
    },
    handleHaveSuccess(res, file, fileList) {
      this.loading = false;
      if (res.status == 100) {
        this.$message.success("导入成功");
        this.initList();
      }else{
        this.$message.warning("上传异常");
      }
    },
    async initToolData() {
      this.toolData = await count.getToolData()
    },
    async initList() {
      await this.$store.dispatch("findRecordListById", this.irState.selectDept);
    },
    async search() {
      await this.$store.dispatch("iRSearch");
      this.initList();
    },
    async handleSizeChange(val) {
      await this.$store.dispatch("iRSizeChange", val);
      this.initList();
    },
    async handleCurrentChange(val) {
      await this.$store.dispatch("iRCurrentChange", val);
      this.initList();
    },
    userInfo(user_id) {
      //获取详情
      this.$router.push({
        path: "/integralCount/detail",
        query: { user_id: user_id }
      });
    }
  },
  created() {
    this.initToolData();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-right {
  border: 1px solid #e5e5e5;
  .content-search {
    margin-top: 20px;
  }
  .statistics-text {
    padding-right: 40px;
    span {
      font-size: 24px;
      color: #409eff;
    }
  }
}
</style>
